<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<style>
			div#cirle{
				/*圆*/
				width: 350px;
				height: 350px;
				border: 1px solid red;
				border-radius:50%;
				/*边框属性 box-shadow: ; 属性；*/
				box-shadow: 5px 5px 5px 50px red inset;
				/*正三角*/
				/* position:relative;
				    width: 0;
				    height: 0;
				    border-width: 0 40px 40px;
				    border-style: solid;
				    border-color: transparent transparent blue; */
					
				}
				div#triangle{
					width: 0;
					border-left:50px solid transparent;
					border-right: 50px solid transparent;
					border-bottom: 50px solid black;
					/* border: 50px solid transparent;
					broder-top-color: rgba(255, 170, 255, 1.0); */
					/*outline 边框轮廓 只针对input 元素*/
					input{
						outline:1px solid red;
					}
					/*实际应用：统配选择器 去掉轮廓
					 {outline：0；}
					 */
				}
				div#picture2{
					width: 0;
					border-top: 50px solid blue;
					border-left: 50px solid transparent;
					border-right: 50px solid transparent;
					border-bottom: 0;
					
				}
			</style>
	</head>
	<body>
		<div id="cirle"></div>
		<div id="triangle">边框：</div>
		<div id="picture2"></div>
	</body>
</html>